<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>JavaScript Bs_Slider example 8</title>

<style>
  .sliderInput {
  	height:20;
    width:40;
  	font-family : Arial, Helvetica, sans-serif;
  	font-size : 12px;
  }
  .smallTxt {
    font-size: 12px;
  }
</style>

<script type="text/javascript" src="/_bsJavascript/lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="/_bsJavascript/lib/EventHandler.js"></script>
<script type="text/javascript" src="/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="/_bsJavascript/core/gfx/Bs_ColorUtil.lib.js"></script>
<script type="text/javascript" src="/_bsJavascript/components/slider/Bs_Slider.class.js"></script>

<script type="text/javascript"><!--
function init() {
  // - Slider 1 -----------------------------------------
  mySlider = new Bs_Slider();
  mySlider.width         = 121;
  mySlider.height        = 26;
  mySlider.minVal        = 0;
  mySlider.maxVal        = 10;
  mySlider.valueInterval = 1.6;
  mySlider.arrowAmount   = 2;
	mySlider.arrowKeepFiringTimeout = 500;
  mySlider.valueDefault  = 0;
  mySlider.imgDir   = '/_bsJavascript/components/slider/img/';
  mySlider.setBackgroundImage('bob/background.gif', 'no-repeat');
  mySlider.setSliderIcon('bob/slider.gif', 13, 18);
  mySlider.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
  mySlider.setArrowIconRight('img/arrowRight.gif', 16, 16);
  mySlider.useInputField = 2;
  mySlider.styleValueFieldClass = 'sliderInput';
  mySlider.colorbar = new Object();
  mySlider.colorbar['color']           = 'blue';
  mySlider.colorbar['height']          = 5;
  mySlider.colorbar['widthDifference'] = -12;
  mySlider.colorbar['offsetLeft']      = 5;
  mySlider.colorbar['offsetTop']       = 9;
  mySlider.drawInto('sliderDiv1');

}
// --></script>

</head>
<body bgcolor="#FFFFFF" text="#3366AA" link="#0000EE" vlink="#551A8B" alink="#FF0000" onLoad="init();">

<h1>JavaScript Bs_Slider example 8</h1>

This is an example of the <a href="http://www.blueshoes.org/en/javascript/slider/" target="_blank">Slidebar Control</a>.
<br><br>

<ul>
	<li>Similar to example 1.</li>
	<li>uses a valueInterval of 1.6 and a minVal/maxVal of 1-10.</li>
</ul>

<hr>
<br>

<div id="sliderDiv1"></div>

</body></html>
